<template>
	<view class="wper100 hper100 map flex-column">
		<view class="flex1" style="min-height: 0;">
			<map :scale="16" style="width: 100%; height:100%;" id="myMap" :markers="markers" :polyline="polyline"
				:include-points="polyline[0].points" :latitude="latitude" :longitude="longitude" :enable-rotate="false">
			</map>
		</view>
		<!-- 悬浮操作 -->
		<view class="border-operate-wrapper">
			<view>
				<!-- 操作栏 -->
				<view class="border-operate">
					<locate-start-end :start="start" :start-desc="trackInfo.startTime" :end="end"
						:end-desc="trackInfo.endTime" :arrow="false" :cust-style="{background:'transparent'}">
					</locate-start-end>

					<view class="flex-align-space-around pt30" style="border-top:1px solid #C9D3E9">
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 ">{{toFormatVal(trackInfo.currentMileage, [0, 450], 1)}}</text>
								<text class="f20 ml10">KM</text>
							</view>
							<text class=" f20 mt10">行驶里程</text>
						</view>
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 "
									v-if="trackInfo.hour">{{toFormatVal(trackInfo.hour, [0, 10], 0)}}</text>
								<text class="f20 ml10" v-if="trackInfo.hour">时</text>
								<text class="f30 ml10"
									v-if="trackInfo.minute">{{toFormatVal(trackInfo.minute, [0, 60], 0)}}</text>
								<text class="f20 ml10" v-if="trackInfo.minute">分</text>
								<text class="f30 ml10"
									v-if="trackInfo.second">{{toFormatVal(trackInfo.second, [0, 60], 0)}}</text>
								<text class="f20 ml10" v-if="trackInfo.second">秒</text>
							</view>
							<text class=" f20 mt10">驾驶时长</text>
						</view>
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 ">{{toFormatVal(trackInfo.currentOil, [0, 20], 2)}}</text>
								<text class="f20 ml10">L</text>
							</view>
							<text class=" f20 mt10">燃油消耗</text>
						</view>
					</view>
					<view class="flex-align-space-around pt30">
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 ">{{toFormatVal(trackInfo.carTravelMaxSpeed, [0, 150], 1)}}</text>
								<text class="f20 ml10">KM/H</text>
							</view>
							<text class=" f20 mt10">最高车速</text>
						</view>
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 ">{{toFormatVal(trackInfo.currentSpeed, [0, 150], 1)}}</text>
								<text class="f20 ml10">KM/H</text>
							</view>
							<text class=" f20 mt10">平均车速</text>
						</view>
						<view class="flex-column-center c-desc w33">
							<view class="bold dinbold">
								<text class="f30 ">{{toFormatVal(trackInfo.carTravelAverageOil, [0, 4.5], 1)}}</text>
								<text class="f20 ml10">L/100KM</text>
							</view>
							<text class=" f20 mt10">平均油耗</text>
						</view>
					</view>
				</view>
				<!-- 操作栏 -->
			</view>
		</view>
		<!-- 悬浮操作 -->
	</view>

</template>


<script>
	import {
		getTravePathAPI
	} from "@/api/api/map.js"
	import LocateStartEnd from "../components/locate-start-end";
	import {
		getRangeVal
	} from "@/utils/utils.js";
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			LocateStartEnd
		},
		data() {
			return {
				latitude: 0,
				longitude: 0,
				trackInfo: {
					currentMileage: '', //当次里程，
					currentSpeed: '', //当次平均车速
					currentOil: '', //当前油耗
					carTravelMaxSpeed: '', //最高车速
					carTravelAverageOil: '', //平均油耗
					hour: 0,
					minute: 0,
					second: 0,
					startTime: '',
					endTime: '',
				},
				start: '',
				end: '',
				//路线信息
				polyline: [{
					width: 8,
					points: [],
					arrowLine: true,
					color: '#FF5A00',
					//arrowIconPath:"/static/images/index/arrow-up.png"
				}],
				//标记点(即移动标记物)
				markers: [],
				address: '',
				recommend: '',
			}
		},
		computed: {
			...mapState(["deviceData"])
		},
		onLoad(option) {
			this.start = option.start;
			this.end = option.end;
			getTravePathAPI(option.id).then(([err, data2]) => {
				let data = data2.locus;
				//如果返回有历史数据，则第一个点作为地图的中心点
				let points = [];
				let markers = [];
				if (data.length) {
					this.longitude = data[0].carLongitude;
					this.latitude = data[0].carLatitude;
					for (let index = 0; index < data.length; index++) {
						let item = data[index];
						if (index == 0 || index == data.length - 1) {
							markers.push({
								id: index,
								width: 15,
								height: 15,
								latitude: item.carLatitude,
								longitude: item.carLongitude,
								iconPath: '/static/images/index/' + (index == 0 ? 'start' : 'end') +
									'.png',
							})
						}
						points.push({
							longitude: item.carLongitude,
							latitude: item.carLatitude,
						});
					}
				}

				this.markers = markers;
				this.polyline = [{
					width: 8,
					points: points,
					arrowLine: true,
					color: '#FF5A00',
				}];
				// this.$nextTick(() => {
				// 	this.markers = markers;
				// })
				let carTravelTime = Number(data2.carTravelTime);
				let trackInfo = {
					currentMileage: data2.carTravelMileage,
					currentSpeed: data2.carTravelAverageSpeed,
					currentOil: data2.carTravelOil,
					carTravelMaxSpeed: data2.carTravelMaxSpeed,
					carTravelAverageOil: data2.carTravelAverageOil,
					hour: parseInt(carTravelTime / 3600),
					minute: parseInt((carTravelTime % 3600) / 60),
					second: parseInt((carTravelTime % 3600) % 60),
					startTime: data2.startTime,
					endTime: data2.endTime
				}
				this.trackInfo = trackInfo;
			})
		},

		methods: {
			toFormatVal(val, arr, fix = 2) {
				if (val == null || val === '') {
					return '-'
				}
				let n = getRangeVal(val, arr);
				return Number(n).toFixed(fix);
			},
		}

	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.border-operate-wrapper {
		width: 100%;
	}

	.border-operate {
		background-color: #fff;
		padding: 20upx 0upx;

	}
</style>
